<template>
  <div class="DragAdjustment">
    <div id="box">
      <div id="left"></div>
      <div id="resize"></div>
      <div id="right"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DragAdjustment',
  components: {},
  props: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  beforeDestroy() {},
  mounted() {
    this.init();
  },
  methods: {
    init() {
      let box = document.getElementById('box');
      let resize = document.getElementById('resize');
      let left = document.getElementById('left');
      let right = document.getElementById('right');
      //   浏览器是以视口左上角为原点
      resize.onmousedown = function (e) {
        let startX = e.clientX; //resize容器  在浏览器视口中的横向（x轴）距离
        let fatherLeft = box.offsetLeft; //父容器 距离浏览器视口左侧距离
        resize.left = resize.offsetLeft - fatherLeft;
        document.onmousemove = function (e) {
          let endX = e.clientX;

          let moveLen = resize.left + (endX - startX);

          let maxT = box.clientWidth - resize.offsetWidth; // box的宽度减去拖动条的宽度，是为了不让拖动条超出父容器
          if (moveLen < 150) moveLen = 150; //最小值限制
          if (moveLen > maxT - 150) moveLen = maxT - 150; //最大值限制

          resize.style.left = moveLen;
          left.style.width = moveLen + 'px';
          right.style.width = box.clientWidth - moveLen - 5 + 'px';
        };
        document.onmouseup = function (evt) {
          document.onmousemove = null;
          document.onmouseup = null;
          resize.releaseCapture && resize.releaseCapture();
        };
        return false;
      };
    },
  },
};
</script>

<style scoped lang="less">
.DragAdjustment {
  height: 100%;
  display: flex;
}
#box {
  //   width: 100%;
  //   height: 100%;
  border: 1px solid black;
  display: flex;
  white-space: nowrap;
  width: 600px;
  height: 500px;
  overflow: hidden;
  #left {
    width: calc(30% - 5px);
    height: 100%;
    background: skyblue;
    float: left;
  }

  #resize {
    width: 5px;
    height: 100%;
    cursor: w-resize;
    float: left;
  }

  #right {
    float: right;
    width: 70%;
    height: 100%;
    background: tomato;
  }
}
</style>
